<template>
	<div class="succeeded" v-if="isAgain && item.succeeded === 1">
		<a-space>
			<cu-icon type="icon-icon-02" />
			已合成
		</a-space>
	</div>
	<div class="top_con">
		<video :controls="false" :src="item.target_url || item.origin_url"></video>
		<cu-icon @click.prevent="handlePlay(item)" class="play-icon" type="icon-play" />
		<div class="operate_con">
			<div class="left_check">
				<a-checkbox v-if="item.succeeded === 0" :value="item.id">
					<span style="color: #fff">选用</span>
				</a-checkbox>
			</div>
			<div class="right_duration">
				{{ utils.convertSecondsToMS(item?.duration * 1000) }}
			</div>
		</div>
		<div class="composition_con">
			<div class="back_con">
				<div v-if="item.poster_url" class="back_item">
					<img :src="item.poster_url" alt="" />
				</div>
				<template v-for="back_item in item.image">
					<div class="back_item" v-if="back_item.type === 'image'">
						<img :src="back_item.url" alt="" />
					</div>
					<div class="back_item" v-if="back_item.type === 'video'">
						<video :src="back_item.url" :controls="false"></video>
					</div>
				</template>
			</div>
			<div class="desc_con">
				<div class="desc_item">
					<div class="left_label">解说音频：</div>
					<a-tooltip :title="item.audio_name">
						<div class="right_value text-ellipsis">
							{{ item.audio_name || "-" }}
						</div>
					</a-tooltip>
				</div>
				<div class="desc_item">
					<div class="left_label">解说音乐：</div>
					<a-tooltip :title="item.bgm_name">
						<div class="right_value text-ellipsis">
							{{ item.bgm_name || "-" }}
						</div>
					</a-tooltip>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom_con">
		<div style="max-width: 160px;" class="video_name text-ellipsis">{{ item.title }}</div>
		<div class="video_name text-ellipsis" v-if="item?.ai_data">
			<a-button @click="calibrationText">文字校准</a-button>
		</div>
	</div>
	
	<textCalibration :visible="calibrationVisible" :item="item" @close="handleCalibrationClose" />
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		nextTick,
		computed,
		watch,
		onBeforeUnmount,
		onMounted
	} from "vue";
	import utils from "@/common/utils/utils";
	import request from "@/common/utils/request";
	import textCalibration from './textCalibration.vue';
	import {message} from 'ant-design-vue';
	export default defineComponent({
		emits: ['handlePlay'],
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
			isAgain: {
				type: Boolean,
				default: false
			}
		},
		components: {
			textCalibration
		},
		setup(props, context) {
			
			const state = reactive({
				calibrationVisible: false
			})
			
			const calibrationText = () => {
				state.calibrationVisible = true
			}

			const handlePlay = (item) => {
				context.emit('handlePlay', item)
			}
			
			const handleCalibrationClose = (ai_data) => {
				state.calibrationVisible = false
				if(ai_data){
					request.post('/work_ai', '/user/shotstack/clip/oneclik/subtitle/preview', {
						ai_data,
						response_id: props?.item?.id
					}).then(res=> {
						message.success('校准成功！')
					}).catch(err=> {
						message.error('校准失败！')
					})
				}
			}
			
			return {
				...toRefs(state),
				utils,
				calibrationText,
				handlePlay,
				handleCalibrationClose
			}
		}
	})
</script>

<style lang="less" scoped>
	.top_con {
		width: 100%;
		height: 526px;
		background: #000;
		display: flex;
		align-items: center;
		justify-content: center;

		>video {
			width: 100%;
			max-height: 526px;
		}

		.play-icon {
			border-radius: 50%;
			position: absolute;
			font-size: 60px;
			left: 50%;
			top: 50%;
			margin-left: -30px;
			margin-top: -30px;
			cursor: pointer;
		}

		position: relative;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.operate_con {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			position: absolute;
			left: 0;
			top: 0;

			.left_check {
				color: #fff;
			}

			.right_duration {
				color: #fff;
			}
		}

		.composition_con {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 20px;
			background-color: rgba(0, 0, 0, 0.5);

			.back_con {
				display: flex;
				align-items: center;
				transform: translateX(-5px);

				.back_item {
					width: 24px;
					height: 48px;
					margin-right: 6px;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #323232;

					img {
						width: 100%;
					}

					video {
						width: 24px;
						height: 48px;
						object-fit: contain;
					}
				}
			}

			.desc_con {
				margin-top: 5px;

				.desc_item {
					display: flex;
					align-items: center;

					.left_label {
						color: #fff;
					}

					.right_value {
						width: 185px;
						color: #fff;
					}
				}
			}
		}
	}
	
	.bottom_con {
		background-color: #fff;
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.video_name {
			color: #333639;
			font-size: 12px;
			flex-shrink: 0;
		}
	
		.label_con {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
	
			.label_item {}
		}
	}
	
</style>